<template>
  <el-dialog width="630px" title="修改密码">
    <el-form ref="passForm" label-width="120px" :model="passForm" :rules="rules">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="passForm.oldPassword" show-password size="small" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="passForm.newPassword" show-password size="small" />
      </el-form-item>
      <el-form-item label="重复密码" prop="confirmPassword">
        <el-input v-model="passForm.confirmPassword" show-password size="small" />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary">确认修改</el-button>
        <el-button size="mini">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
export default {
  data() {
    return {
      passForm: {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码字段
      },
      rules: {
        oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }], // 旧密码
        newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          min: 6,
          max: 16,
          message: '新密码的长度为6-16位之间'
        }], // 新密码
        confirmPassword: [{ required: true, message: '重复密码不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          validator: (rule, value, callback) => {
            // value
            if (this.passForm.newPassword === value) {
              callback()
            } else {
              callback(new Error('重复密码和新密码输入不一致'))
            }
          }
        }] // 确认密码字段
      }
    }
  }
}
</script>

<style>

</style>
